import { useState } from "react"
import { createPortal } from 'react-dom'
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { homeState, detailState } from '@/store'
import { getDetailData } from '@/services/home.service'
import CustomTable from "@/components/customTable"
import ElevatorDetails from '@/pages/home/features/elevatorDetails'
import RescueDetails from '@/pages/home/features/rescueDetails'

import styles from './index.module.css'

const TableInfo = () => {
    const [elevatorDetailsVisible, setElevatorDetailsVisible] = useState(false);
    const [rescueDetailsVisible, setRescueDetailsVisible] = useState(false);
    const [currentRecord, setCurrentRecord] = useState(null);
    const { elevators } = useRecoilValue(homeState);
    const setDetailState = useSetRecoilState(detailState);

    const openDetail = async (record: any) => {
        setDetailState(await getDetailData(record.id));
        setElevatorDetailsVisible(true);
        setCurrentRecord(record);
    }

    const openRescueDetail = async (record: any) => {
        setDetailState(await getDetailData('8fea144863ab4b80b92c46be27973db3'));
        setRescueDetailsVisible(true);
        setCurrentRecord(record);
    }

    return (
        <div className={styles.tableWrapper}>
            <CustomTable
                columns={[
                    {title: '告警编号', dataIndex: 'alarmNumber', key: 'alarmNumber', width: '13.3rem'},
                    {title: '使用地址', dataIndex: 'address', key: 'address', width: '59.7rem'},
                    {title: '救援进度', dataIndex: 'rescueProgress', key: 'rescueProgress', width: '33.2rem'},
                    {
                        title: '工单',
                        dataIndex: 'id',
                        key: 'id',
                        render: (_, record: any) => <div
                            className={styles.detailButton}
                            onClick={() => {
                                if (record.status === 'warnning') {
                                    openRescueDetail(record);
                                } else {
                                    openDetail(record);
                                }
                            }}
                        >详情</div>,
                        width: '16rem'}
                ]}
                dataSource={[
                    { key: 'G14321', alarmNumber : 'G14321', address: '东厂房西北侧', rescueProgress: '告警', status: 'warnning' },
                    { key: 'G14322', alarmNumber : 'G14322', address: '塔基路1699号1号宿舍楼东侧中间西台', rescueProgress: '处理中', status: 'processing', id: '41c29957ce36498fb4007a37a235f8dd' },
                    { key: 'G14323', alarmNumber : 'G14323', address: '昆山市锦溪镇邵甸港路328号办公楼大厅南', rescueProgress: '已完成', status: 'conpelete', id: '2acce970d1a64cd495f74b2ec057a9b4' },
                    { key: 'G14324', alarmNumber : 'G14324', address: '石牌毛许路366号1号宿舍楼东侧中间北侧西台', rescueProgress: '已完成', status: 'conpelete', id: '2d450354edc94020aa1a8e5c2feaca6a'  },
                    { key: 'G14325', alarmNumber : 'G14325', address: '莱斯路89号2#楼（食堂）西南侧', rescueProgress: '已完成', status: 'conpelete', id: '70fadd97a01b4c0bbb58e5a36c4b70ff'  },
                    { key: 'G14326', alarmNumber : 'G14325', address: '塔基路1699号1号宿舍楼西北侧中台', rescueProgress: '已完成', status: 'conpelete', id: '01589f278cc340cab7571ef994124849'  }
                ]}
                warningKeys={['G14321']}
                processingKeys={['G14322']}
            />
            <CustomTable
                columns={[
                    {title: '电梯编号', dataIndex: 'elevatorNumber', key: 'elevatorNumber', width: '16.3rem'},
                    {title: '使用地址', dataIndex: 'address', key: 'address', width: '39rem'},
                    {title: '下期维保时间', dataIndex: 'nextMaintenanceTime', key: 'nextMaintenanceTime', width: '27.2rem'},
                ]}
                dataSource={elevators.map(({number, address}) => (
                    { key: number, elevatorNumber : number, address: address, nextMaintenanceTime: '2014/04/27' }
                ))
            }
            />
            {
                createPortal(
                    <ElevatorDetails
                        visible={elevatorDetailsVisible}
                        hide={() => setElevatorDetailsVisible(false)}
                        currentElevator={currentRecord}
                    />, document.body
                )
            }
            {
                createPortal(
                    <RescueDetails
                        visible={rescueDetailsVisible}
                        hide={() => setRescueDetailsVisible(false)}
                        currentElevator={currentRecord}
                    />, document.body
                )
            }
        </div>
    )
}

export default TableInfo